<template>
	<div class="system-menu-container layout-pd">
		<el-card shadow="hover">
			<div class="system-menu-search mb15">
				<el-row :gutter="20">
					<el-col :span="24">
						<el-input size="default" placeholder="配置key查询" class="mt10" v-model="state.param.configKey"
							v-auth="'system:oss:query'" clearable @keyup.enter.native="getTableData" />
						<el-input size="default" placeholder="桶名称查询" class="mt10" v-model="state.param.bucketName"
							v-auth="'system:oss:query'" clearable @keyup.enter.native="getTableData" />
						<el-select v-model="state.param.status" placeholder="请选择状态" clearable size="default" class="mt10"
							@change="getTableData" v-auth="'system:oss:query'">
							<el-option key="0" label="是" value="0" />
							<el-option key="1" label="否" value="1" />
						</el-select>
						<el-button size="default" type="primary" class="mt10" @click="getTableData"
							v-auth="'system:oss:query'">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" class="mt10" type="info" @click="resetParamData()"
							v-auth="'system:oss:query'">
							<el-icon>
								<ele-Refresh />
							</el-icon>
							重置
						</el-button>
						<el-button size="default" type="success" class="mt10" @click="onOpenAddOss('add')"
							v-auth="'system:oss:add'">
							<el-icon>
								<ele-FolderAdd />
							</el-icon>
							添加
						</el-button>
						<el-button size="default" class="mt10" type="primary" :icon="'ele-CloseBold'" style="float: right;"
							@click="router.go(-1)" />
					</el-col>
				</el-row>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column type="selection" width="55" align="center" />
				<el-table-column label="主建" align="center" prop="ossConfigId" />
				<el-table-column label="配置key" align="center" prop="configKey" />
				<el-table-column label="访问站点" align="center" prop="endpoint" />
				<el-table-column label="自定义域名" align="center" prop="domain" />
				<el-table-column label="桶名称" align="center" prop="bucketName" />
				<el-table-column label="前缀" align="center" prop="prefix" />
				<el-table-column label="域" align="center" prop="region" />
				<el-table-column label="桶权限类型" align="center" prop="accessPolicy">
					<template #default="scope">
						<el-tag type="warning" v-if="scope.row.accessPolicy === '0'">private</el-tag>
						<el-tag type="success" v-if="scope.row.accessPolicy === '1'">public</el-tag>
						<el-tag type="info" v-if="scope.row.accessPolicy === '2'">custom</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="是否默认" show-overflow-tooltip width="120">
					<template #default="scope">
						<el-switch v-model="scope.row.status" active-value="0" inactive-value="1" size="default"
							@change="handleStatusChange(scope.row)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140" fixed="right" v-auths="['system:oss:edit','system:oss:remove']">
					<template #default="scope">
						<el-button size="small" text type="primary" @click="onOpenEditOss('edit', scope.row)"
							v-auth="'system:oss:edit'">修改</el-button>
						<el-button size="small" text type="primary" @click="onTabelRowDel(scope.row)"
							v-auth="'system:oss:remove'">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<OssDialog ref="ossDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemOss">
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useOssConfig } from '/@/api/system/ossConfig';
import router from '/@/router';


// 引入组件
const OssDialog = defineAsyncComponent(() => import('/@/views/system/oss/editOssConfig.vue'));

// 定义变量内容
const ossDialogRef = ref();
const state = reactive<TableType>({
	tableData: {
		// 表格树数据
		data: [],
	},
	total: 0,
	loading: false,
	param: {
		pageNum: 1,
		pageSize: 10,
		configKey: undefined,
		bucketName: undefined,
		status: undefined,
	},
});

/**
 * 初始化表格数据
 * @returns
 */
const getTableData = async () => {
	state.tableData.loading = true;
	try {
		const res = await useOssConfig().listOssConfig(state.param);
		state.tableData.data = res.rows;
		state.total = res.total;
	} catch (error) {
		Promise.reject(error);
	}
	state.tableData.loading = false;
};

/**
 * 打开新增配置弹窗
 * @param type
 * @param data 配置树数据
 */
const onOpenAddOss = (type: string) => {
	ossDialogRef.value.openDialog(type, {}, state.total);
};
/**
 * 打开编辑配置弹窗
 * @param type
 * @param row 当前行数据
 */
const onOpenEditOss = (type: string, row: RowOssConfigType) => {
	ossDialogRef.value.openDialog(type, row);
};


/**
 * 删除配置
 * @param row 当前行数据
 */
const onTabelRowDel = async (row: RowOssConfigType) => {
	try {
		const confirmResult = await ElMessageBox.confirm(`此操作将永久删除配置：${row.ossName}, 是否继续?`, '提示', {
			confirmButtonText: '删除',
			cancelButtonText: '取消',
			type: 'warning',
		});
		if (confirmResult === 'confirm') {
			const response = await useOssConfig().delOssConfig(row.ossId);
			ElMessage.success(response.msg);
			getTableData();
		} else {
			ElMessage.info('已取消删除');
		}
	} catch (error) {
		Promise.reject(error);
	}
};


/**
 * 修改配置状态
 * handleStatusChange
 * @param row 当前行数据
 */
const handleStatusChange = async (row: RowOssConfigType) => {
	try {
		ElMessageBox.confirm(`此操作将修改配置：${row.ossName} 状态, 是否继续?`, '提示', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}).then(async () => {
			const response = await useOssConfig().changeOssConfigStatus(row.ossConfigId, row.status, row.configKey);
			if (response.code === 200) {
				ElMessage.success(response.msg);
				getTableData();
			} else {
				row.status = row.status === '0' ? '1' : '0';// 状态修改失败，还原状态
			}
		}).catch(() => {
			row.status = row.status === '0' ? '1' : '0';// 状态修改失败，还原状态
		});
	} catch (error) {
		Promise.reject(error);
	}
};


/**
 * 重置查询参数
 */
const resetParamData = () => {
	state.param = {
		pageNum: 1,
		pageSize: 10,
		ossName: '',
		status: '',
	};
	getTableData();
};



// 页面加载时
onMounted(() => {
	getTableData();
});
</script>
<style lang="scss" scoped>
.mt10 {
	max-width: 140px;
	margin: 10px 0 10px 10px;
}
</style>